<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="top-info">
		</view>

		<view class="order">

			<view class="card_top">
				<!-- 头像 -->
				<view class="card_portrait">
					<image style="width: 100rpx;height: 100rpx;" :src="info.avatar"></image>
				</view>
				<!-- 右侧 -->
				<view style="width: 80%;">
					<view class="card_item1">
						<view class="item_name">{{info.username?info.username:'无'}}</view>
						<view class="item_mx" @click="goPage('/pages/distribution/commission', true)">明细</view>
					</view>
					<view class="card_item2">
						<view style="flex: 1;">
							<view class="item_dj">{{info.level?info.level:"暂无等"}}级</view>
						</view>
						<view class="item_yc"></view>
					</view>
				</view>

			</view>
			<view class="br"></view>
			<view class="card_bottom">
				<view>
					<view class="bottom_name">总收益</view>
					<view class="bottom_money">{{info.money_sum?info.money_sum:'0.00'}}</view>
				</view>
				<view>
					<view class="bottom_name">待入账佣金</view>
					<view class="bottom_money">{{info.amount_sum?info.amount_sum:"0.00"}}</view>
				</view>
				<view>
					<view class="bottom_name">我的消费</view>
					<view class="bottom_money">{{info.profit_money?info.profit_money:"0.00"}}</view>
				</view>
			</view>

		</view>
		<view class="message">
			<view class="message_item1" v-for="(item,index) in mailList">
				<view>
					<image style="width: 54rpx;height: 54rpx;" src="../../static/image/fenxiao5.png"></image>
				</view>
				<view class="message_content">{{item.content}}</view>
				<view class="message_status">{{ item.createtime | timeFrom('yyyy-mm-dd') }}</view>
			</view>
			<!--  <view class="message_item1">
               <view ><image style="width: 54rpx;height: 54rpx;" src="../../static/image/fenxiao6.png"></image></view>
               <view class="message_content" >您的资料已提交，等待管理员审核</view>
               <view class="message_status">刚刚</view>
           </view> -->
		</view>

		<view class="box_bottom">
			<view class="box1">
				<view class="box_item" @click="toTeam()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao14.png"></image>
					<view class="box_name">我的团队</view>
				</view>
				<view class="box_item" @click="toCommission()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao13.png"></image>
					<view class="box_name">佣金明细</view>
				</view>
				<view class="box_item" @click="showDistributionOrder()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao8.png"></image>
					<view class="box_name">分销订单</view>
				</view>
				<!-- <view class="box_item" @click="toShop()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao10.png"></image>
					<view class="box_name">推广商品</view>
				</view> -->
			</view>
			<!-- <view class="box2">
				<view class="box_item" @click="goPage('pages/personalCenter/personaldata')">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao11.png"></image>
					<view class="box_name">我的资料</view>
				</view>
				<view class="box_item" @click="showRank()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao9.png"></image>
					<view class="box_name">分销排行</view>
				</view>
				<view class="box_item" @click="toggle('bottom')">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao12.png"></image>
					<view class="box_name">邀请海报</view>
				</view>
				<view class="box_item" @click="showShare()">
					<image style="width: 74rpx;height: 74rpx;" src="../../static/image/fenxiao7.png"></image>
					<view class="box_name">分享记录</view>
				</view>
			</view> -->
		</view>

		<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change">
			<view class="popBox" style="background-color: #fff;height: 248rpx;">
				<view class="popItem" style="">
					<view>

						<button class="myBtn" style="background: #ffffff;line-height: 40rpx;" open-type="share">
							<image style="width: 70rpx;height: 70rpx;" src="../../static/image/fenxiao49.png"></image>
							<view class="bottom_name">微信好友</view>
						</button>

					</view>
					<view @click="tohaibao()">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/image/fenxiao50.png"></image>
						<view class="bottom_name">生成海报</view>
					</view>
					<view @click="tolink()">
						<image style="width: 70rpx;height: 70rpx;" src="../../static/image/fenxiao51.png"></image>
						<view class="bottom_name">复制链接</view>
					</view>
				</view>
				<view class="quxiao" @click="close()">取消</view>
			</view>
		</uni-popup>
		<uni-popup ref="fenxiaopopup" :type="fenxiaotype" :animation="false" :maskClick="false">
			<view class="popBox" style="height: 656rpx;width: 609rpx;background: #FFFFFF;border-radius: 16px;">
				<view style="display: flex;flex-direction: column;align-items: center;">
					<view style="margin-top: 60rpx;">
						<image style="width: 183rpx;height: 169rpx;"
							src="https://huboshizb.bigchun.com/uploads/20220924/115bc0a1b80e87e06cd1ace8e317b16f.png">
						</image>
					</view>
					<view class="wanshan">待完善信息</view>
					<view class="wanshanzi">请前往完善您的信息</view>
					<view class="shenqing" @click="toFxs()">申请分销商</view>
					<view class="fanhui" @click="tofanhui()">返回</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="haibaopopup" :type="haibaotype" :animation="false" :maskClick="true">
			<view class="popBox" style="display: flex;flex-direction: column; align-items: center;">
				<view>
					<image @longtap="bankImg" style="width: 700rpx;height: 980rpx;"
						src="https://huboshizb.bigchun.com/uploads/20220924/073a0b72b087dfd6c7616a3396c12f79.png">
					</image>
				</view>
				<view @click="haibaoclose()" style="position: absolute;top: 5px;right: 25px;">
					<image style="width: 59rpx;height: 59rpx;"
						src="https://huboshizb.bigchun.com/uploads/20220924/5dfe5eb7e75bde2f85180e8207002657.png">
					</image>
				</view>
				<view class="baocun">
					<view class="baocunzi">长按图片保存并分享</view>
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="fenxpopup" :type="fenxtype" :animation="false" :maskClick="true">
			<view class="popBox"
				style="width: 700rpx;height: 460rpx; background: #FFFFFF;border-radius: 48rpx;display: flex;flex-direction: column;align-items: center;">
				<view class="fxshang">
					链接分享
					<view @click="fenxclose()" style="position: absolute;top: 0rpx;right: 20rpx;">
						<image style="width: 59rpx;height: 59rpx;"
							src="https://huboshizb.bigchun.com/uploads/20220924/5dfe5eb7e75bde2f85180e8207002657.png">
						</image>
					</view>
				</view>
				<view class="fuz">复制链接去粘贴</view>
				<view class="fuzhi">
					<view class="lianjie">{{copyVal}}</view>
					<view class="fzbtn" @click="copy()">复制</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				copyVal: "https://huboshi.com/di13",
				fenxtype: 'center',
				haibaotype: 'bottom',
				fenxiaotype: 'center',
				type: 'top',
				info: {
					"level": '',
					"avatar": "",
					"username": "",
					"profit_money": 0.00,
					"money_sum": 0.00,
					"amount_sum": 0.00
				},
				userTeam: {
					"in_status": 0, //0未提交1已提交
					"status": 0 //0未审核1审核通过
				},
				mailList: [],
			};
		},
		onLoad() {

			this.getData()
			this.getusermail()
		},
		methods: {
			//长按图片
			bankImg() {
				//只在app端
				uni.downloadFile({ //获得二维码的临时地址
					url: '图片路径',
					success: (res) => {
						console.log('获取url', res)
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, //传入临时地址
								success() {
									uni.showToast({
										title: '保存成果',
										duration: 2000
									});
								},
								fail() {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									});
								}
							})
						}
					}
				})
			},

			copy() {
				let value = this.copyVal; // 复制的内容  我这里写死  可以通过参数传过来
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功"
						})
					}
				});
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: '自定义分享标题',
					path: '/pages/test/test?id=123'
				}
			},
			tofanhui() {
				uni.navigateBack();
				// this.$refs['fenxiaopopup'].close();
			},
			getData() {

				let that = this
				that.$api.teamRecord().then(res => {
					console.log('res', res)
					if (res.code == 1) {
						that.info = res.data
					}
				});

				that.$api.getUserTeam().then(res => {
					console.log('res', res)
					if (res.code == 1) {
						that.userTeam = res.data
						if (res.data.in_status == 0) {
							this.$refs['fenxiaopopup'].open();
						}

						if (res.data.status == 0 && res.data.in_status == 1) {
							uni.showModal({
								title: '温馨提示',
								content: '您的资料已提交，等待管理员审核',
								showCancel: false,
								cancelText: '',
								confirmText: '确定',
								success: res => {
									uni.navigateBack({});
								},
								fail: () => {},
								complete: () => {}
							});
						}

					}
				});
			},
			getusermail() {
				this.$api.usermail({}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						this.mailList = res.data
					}
				});
			},
			toggle(type) {
				this.type = type;
				this.$refs['popup'].open();
			},
			change(e) {

			},
			close() {
				this.$refs['popup'].close();
			},
			//跳转我的团队
			toTeam() {
				uni.navigateTo({
					url: '/pages/distribution/myteam'
				})
			},
			//跳转推广商品
			toShop() {
				uni.navigateTo({
					url: '/pages/distribution/promoteShop'
				})
			},
			//跳转分享记录
			showShare() {
				uni.navigateTo({
					url: '/pages/distribution/shareRecord'
				})
			},
			//跳转分销订单
			showDistributionOrder() {
				uni.navigateTo({
					url: '/pages/distribution/distributionOrder'
				})
			},
			//跳转排名
			showRank() {
				uni.navigateTo({
					url: '/pages/distribution/rank'
				})
			},
			//跳转佣金明细
			toCommission() {
				uni.navigateTo({
					url: '/pages/distribution/commission'
				})
			},
			//跳转申请分销商
			toFxs() {
				uni.navigateTo({
					url: '/pages/distribution/applyPromote'
				})
			},
			//生成海报
			tohaibao() {
				this.$refs['popup'].close();
				this.$refs['haibaopopup'].open();
			},
			//关闭海报
			haibaoclose() {
				this.$refs['haibaopopup'].close();
			},
			//复制链接
			tolink() {
				this.$refs['popup'].close();
				this.$refs['fenxpopup'].open();
			},
			//关闭链接
			fenxclose() {
				this.$refs['fenxpopup'].close();
			}

		}
	};
</script>
<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.personal-wrap {

		// height: 100vh;
	}

	.top-info {
		height: 180rpx;
		background: #DE2415;
	}

	.order {
		background-size: 100% 100%;
		// width: 690rpx;
		height: 298rpx;
		padding: 30rpx;
		background-image: linear-gradient(#ead3bc, #e9b799);
		// background-color: #fff;
		// margin: auto;
		border-radius: 20rpx;
		margin-top: -141rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.card_top {
		display: flex;
		width: 100%;
	}

	.card_portrait {
		width: 20%;
		// background-size: 100% 100%;
		// width: 84rpx;
		// height: 84rpx;
		// background-image: url('/static/image/fenxiao5.png');
	}

	.card_item1 {
		display: flex;
	}

	.item_name {
		flex: 1;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		// line-height: 29px;
	}

	.item_mx {
		width: 78rpx;
		height: 38rpx;
		border: 1px solid #DE2415;
		border-radius: 19rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #DE2415;
		text-align: center;
	}

	.card_item2 {
		display: flex;
		margin-top: 20rpx;
	}

	.item_dj {
		background-size: 100% 100%;
		width: 125rpx;
		height: 38rpx;
		background-image: url('/static/image/fenxiao3.png');
		color: #3F2B1D;
		font-size: 24rpx;
		text-align: center;
	}

	.item_yc {
		background-size: 100% 100%;
		width: 32rpx;
		height: 22rpx;
		background-image: url('/static/image/fenxiao4.png');
	}

	.br {
		height: 1px;
		background: #D6B193;
		margin-top: 30rpx;
	}

	.card_bottom {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.bottom_name {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #281407;
		line-height: 29rpx;
	}

	.bottom_money {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #281407;
		line-height: 29rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.message {
		// margin-top: 30rpx;
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		// width: 90%;
		// margin: 36rpx auto;
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.message_item1 {
		display: flex;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 10rpx;
		align-items: center;
		margin-top: 20rpx;
	}

	.message_content {
		flex: 1;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #281407;
		margin-left: 12rpx;
	}

	.message_status {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.box_bottom {
		margin: auto;
		width: 90%;
		position: fixed;
		bottom: 10px;
		left: 5%;
	}

	.box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.box2 {
		margin-top: 55rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.box_name {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #281407;
		line-height: 29rpx;
	}

	.box_item {
		width: 120rpx;
		// width: calc((750upx - 60upx) / 2);
		text-align: center;
	}

	.yaoqing {
		height: 248rpx;
		border-radius: 28px 28px 0px 0px;

		background: #FFFFFF;
	}

	.bottom_name {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		margin-top: 13rpx;
	}

	.popItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 40rpx 70rpx 0 70rpx;
		text-align: center;
	}

	.quxiao {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 30rpx;
	}

	.shenqing {
		width: 495rpx;
		height: 88rpx;
		background: #DE2415;
		border-radius: 44rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 48rpx;
	}

	.wanshan {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
		margin-top: 60rpx;
	}

	.wanshanzi {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #585858;
		margin-top: 38rpx;
	}

	.fanhui {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #DE2415;
		opacity: 0.8;
		margin-top: 16rpx;
	}

	.baocun {
		width: 454rpx;
		height: 58rpx;
		background: #8B8B8B;
		border-radius: 29rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 58rpx;
		text-align: center;
		margin-top: 21rpx;
	}

	.baocunzi {}

	.fxshang {
		background-size: 100% 100%;
		width: 701rpx;
		height: 164rpx;
		background-image: url('https://huboshizb.bigchun.com/uploads/20221008/2f8fd16f6438dbcef83abf9c2e5f5174.png');
		font-size: 42rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 164rpx;
		text-align: center;
	}

	.fuz {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #737474;
		text-align: center;
		margin-top: 60rpx;
	}

	.fuzhi {
		display: flex;
		width: 590rpx;
		height: 88rpx;
		background: #FFFFFF;
		border: 2rpx solid #E5E5E5;
		border-radius: 8rpx;
		align-items: center;
		margin-top: 30rpx;
	}

	.fzbtn {
		width: 120rpx;
		height: 100%;
		background: #F5BDB8;
		border-radius: 0rpx 8rpx 8rpx 0rpx;
		border: 1rpx solid #DE2415;
		font-size: 34rpx;
		color: #DE2415;
		line-height: 70rpx;
		text-align: center;

	}

	.lianjie {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #737474;
		padding-left: 20rpx;
		flex: 1;
	}

	.myBtn::after {
		border: none;
		// background: #ffffff !important;
	}
</style>